<template>
  <div class="content">
    <NavBar></NavBar>
    <div class="center">
      <div class="title">输入验证码</div>
      <div class="arrive">短信验证码已发送至{{ $route.query.mobile }}</div>
      <!-- <van-password-input
        :value="value"
        :length="4"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
        gutter="20px"
        class="border"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      /> -->
      <Input v-model="mesVal"></Input>
      <div class="refresh">
        <p ref="nana" @click="hundleAgain">重新获取验证码</p>
        <!-- <van-count-down
          class="miao"
          ref="countDown"
          :time="60000"
          :auto-start="true"
          format="ss"
          @finish="changeVal"
        /> -->

        <p class="miao" v-if="timeshow">({{ time }}s)</p>
      </div>
      <div class="error">无法收到短信验证码请联系客服协助</div>
    </div>
    <van-popup v-model="show">
      <div class="success">
        <img src="../img/success.png" alt="" />
        <div class="ok">修改成功</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import Input from '../compontent/index.vue'
import API from '@/services/h5/my'
import { Notify } from 'vant'
export default {
  components: { NavBar, Input },
  data() {
    return {
      value: '',
      showKeyboard: true,
      mesVal: '',
      show: false,
      time: 60,
      timeshow: true
    }
  },
  watch: {
    //监听输入框的值
    mesVal(val) {
      if (val != '' && val.length == 4 && this.time !== 0) {
        let params = {
          mobile: this.$route.query.mobile,
          validateCode: val
        }
        API.savePhone(params).then(res => {
          if (res.data && res.data.code === 1000) {
            this.show = true
            this.$router.push({ path: `/login` })
          }
          if (res.data && res.data.code === 2008) {
            Notify({ type: 'danger', message: res.data.data })
          }
        })
      }
    },
    //监听倒计时的值
    time(val) {
      if (val == 0) {
        this.$refs.nana.style.color = '#38a3ff'
        this.timeshow = false
      } else {
        this.$refs.nana.style.color = '#333'
      }
    }
  },
  mounted() {
    this.timer()
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    //倒计时
    timer() {
      if (this.time > 0) {
        this.time--
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
      }
    },
    hundleAgain() {
      if (this.time == 0) {
        this.time = 60
        let params = {
          mobile: this.$route.query.mobile
        }
        API.getvalidation(params).then(res => {
          if (res.data && res.data.code === 1000) {
            this.timeshow = true
            this.timer()
          }
        })
      }
    }
    // changeVal() {
    //   this.$refs.nana.style.color = '#38a3ff'
    // }
  }
}
</script>
<style scoped lang="less">
/deep/.van-password-input__security li {
  border: 0.5px solid #ccc;
}
.content {
  background: #fafafa;
  height: calc(100vh);
  .title {
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 76px;
  }
  .arrive {
    height: 15px;
    line-height: 15px;
    font-size: 15px;
    text-align: center;
    color: #999;
    margin-top: 12.5px;
  }
  .border {
    padding-top: 30px;
    width: 275px;
    margin: 0 auto;
  }
  .refresh {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .miao {
    line-height: 35px;
  }
  .error {
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    color: #f3bba4;
    text-align: center;
  }
  .numInputs {
    margin-top: 25px;
  }
  .success {
    width: 140px;
    height: 122px;
    text-align: center;
  }
  img {
    width: 44px;
    height: 44px;
    margin-top: 20px;
  }
  .ok {
    font-size: 18px;
    line-height: 18px;
    margin-top: 10px;
  }
}
</style>